<template>
	<view class="content">
<view class="box">
	<view class='row'>
		<text class="hd">用户登录</text>
	</view>
	<view class='row'><text>账号:</text> <input type="text" v-model="userinfo.username" placeholder="请输入账号"></view>
	<view class='row'><text>密码:</text> <input type="text" v-model="userinfo.password" password placeholder="请输入密码">
	</view>
	<view> <button type="primary" @click="login"> 登录</button></view>
</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/utils/http.js';
	import {
		ref,
		toRefs,
		reactive
	} from 'vue';
	export default {
		setup() {
			const state = reactive({
				userinfo: {
					username: "",
					password: ""
				}
			})

			const login = async () => {
				const info = await http("/user/login", "post", state.userinfo);
				console.log(info);
				if (info.data.code == 2) {

					//保存token
					uni.setStorageSync("token", info.data.tokenId);

					uni.showToast({
						title: "登录成功",
						success() {
							uni.navigateTo({
								url: "/pages/index/index"
							})
						}
					})
				}

			}

			return {
				...toRefs(state),
				login

			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 300rpx 40rpx;
		background-color: #f6f7f6;
		height: 100vh;
		vertical-align: middle;
		box-sizing: border-box;


		.row {
			padding: 0rpx;
			display: flex;
			height: 75rpx;
			line-height: 75rpx;
			margin-bottom: 20rpx;

			.hd {
				color: #2974bb;
				font-size: 48rpx;
				text-align: center;
				font-weight: 500;
				display: block;
			}

			text {
				flex: 1;
				font-weight: 400;
				font-family: "微软雅黑";
			}

			input {
				flex: 7;
				background-color: #fff;
				padding: 15rpx;
			}
		}
	}
</style>
